<template>
  <div>
    <!-- el-tree组件
    使用场景：组织架构、人员管理等
    1. 通过:data指定变量，渲染树
    2. 通过:props 自定义属性数据的属性名
    3. 通过@node-click自定义事件=》传入回调函数
     -->
    <el-tree
      :data="data"
      :props="defaultProps"
      @node-click="handleNodeClick"
    ></el-tree>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 树形数据结构=》嵌套关系的数据结构
      data: [
        // 一级
        {
          label: '总裁办',
          children: [{
            // 二级
            label: '秘书处',
            children: [{
              label: '一秘处'
            }]
          }]
        },
        {
          label: '研发部',
          children: [{
            label: '前端开发部',
            children: [{
              label: 'UI'
            },
            {
              label: 'HTML'
            }]
          }, {
            label: '后端开发部',
            children: [{
              label: 'java'
            }]
          }]
        }
      ],
      defaultProps: {
        // 自定义属性名
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      console.log('当前点击节点：', data)
    }
  }
}
</script>

<style lang="less" scoped>
</style>
